<template>
  <div>
    <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" class="load--height">
      <li v-for="(list,index) in list" :key="index">
        <div class="wrap-list" @click="goDetail(list.id)">
          <p>{{list.filename}}</p>
          <i class="icon iconfont icon-youjiantou"></i>
        </div>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 0
    }
  },
  created() {
    this.page = 0;
  },
  methods: {
    //下拉获取数据
    loadMore() {
      this.loading = true
      this.$axios
        .get('/front/getList', {
          params: {
            userId: 1,
            pageSize: 20,
            pageNum: this.page,
          }
        })
        .then(res => {
          // response.setContentType("text/xml;charset=GBK");
          var arrList = res.data.filePage.content
          this.page++
          this.list = this.list.concat(arrList)
        })
      this.loading = false
    },
    goDetail(id) {
      this.$router.push({
        name: 'DutyDetail',
        query: {
          id: id
        }
      })
    }
  }
}
</script>
<style lang="scss">
@import '../assets/css/duty.scss';
.load--height {
  // height: 500px;
  // overflow: hidden;
  // overflow-y: scroll;
}
</style>
